<template>
    <div>
        <hs-breadcrumb :breadcrumb="breadcrumb"></hs-breadcrumb>

        <Card :bordered="false" :style="{marginBottom:'10px'}">
            <!--标题-->
            <div slot="title">
                <div class="hs-screen-box">
                    <div>签到设置</div>
                    <div>
                        <ButtonGroup>
                            <Button @click="showSignRecord">签到记录</Button>
                        </ButtonGroup>
                    </div>
                </div>
            </div>

            <Form ref="formValidate" :model="params" :rules="ruleValidate" :label-width="130">
                <FormItem label="领取知豆数量：" prop="dailyReceiveNum">
                    <InputNumber :min="0"  v-model="params.dailyReceiveNum" placeholder="请输入每日领取知豆数量" style="width: 300px"></InputNumber>
                </FormItem>
                <FormItem label="最多领取数量：" prop="totalReceiveNum">
                    <InputNumber :min="1"  v-model="params.totalReceiveNum" placeholder="请输入每个用户最多领取知豆数量" style="width: 300px"></InputNumber>
                </FormItem>
                <FormItem label="">
                    <Button type="primary" style="width: 88px" @click="handleSubmit('formValidate')">保存</Button>
                </FormItem>
            </Form>

            <!-- 显示签到记录 -->
            <sign-record ref="signRecord"></sign-record>
        </Card>
    </div>
</template>

<script>
    import hsBreadcrumb from '@/components/hs-breadcrumb';
    import signRecord from './components/sign-record';

    export default {
        data() {
            return {
                // 参数
                params: {
                    dailyReceiveNum: 0,
                    totalReceiveNum: 0
                },
                ruleValidate:{
                    dailyReceiveNum: [
                        {required: true, message: '领取知豆数量不能为空', trigger: 'change', type:'number'}
                    ],
                    totalReceiveNum: [
                        {required: true, message: '最多领取数量不能为空', trigger: 'change', type:'number'}
                    ]
                },
                // 面包屑
                breadcrumb: [
                    {name: '首页', url: '', icon: 'ios-home-outline', size: 18},
                    {name: '签到管理', url: '', icon: '', size: 0},
                    {name: '签到设置', url: '', icon: '', size: 0}
                ]
            }
        },
        created() {
            // 签到设置-查询签到设置
            this.findUserSignInConfig();
        },
        methods: {
            // 点击提交验证
            handleSubmit(name) {
                // console.log(this.params);
                this.$refs[name].validate((valid) => {
                    if (valid) {
                        // 签到设置-保存签到设置
                        this.saveUserSignInConfig();
                    }
                })
            },
            // 签到设置-查询签到设置
            findUserSignInConfig() {
                this.axios.post('/userSignIn/findUserSignInConfig').then(res => {
                    console.log(res);
                    if (res.status == 200) {
                        if (res.data){
                            this.params.dailyReceiveNum = res.data.dailyReceiveNum;
                            this.params.totalReceiveNum = res.data.totalReceiveNum;
                        }
                    }
                    if (res.status == 201) {
                        this.$Message.error(res.msg);
                    }
                    if (res.status == 500) {
                        this.$Notice.error({
                            title: '服务器内部错误',
                            desc: '查询签到设置接口报错',
                            duration: 0
                        });
                    }
                })
            },
            // 签到设置-保存签到设置
            saveUserSignInConfig() {
                // 询问是否保存签到设置
                this.$Modal.confirm({
                    title: `是否保存签到设置？`,
                    onOk: () => {
                        // 保存签到设置
                        this.axios.post('/userSignIn/saveUserSignInConfig', this.params).then(res => {
                            console.log(res);
                            if (res.status == 200) {
                                this.$Message.success('操作成功.')
                            }
                            if (res.status == 201) {
                                this.$Message.error(res.msg);
                            }
                            if (res.status == 500) {
                                this.$Notice.error({
                                    title: '服务器内部错误',
                                    desc: '保存签到设置接口报错',
                                    duration: 0
                                });
                            }
                        })
                    },
                    onCancel: () => {
                        this.$Message.info('您点击了取消.');
                    }
                });
            },
            // 显示签到记录
            showSignRecord(){
                this.$refs.signRecord.show();
            }
        },
        components: {
            hsBreadcrumb,
            signRecord
        }
    }
</script>

<style scoped>

</style>